<!--
 * @Descripttion: 续费管理
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-05 14:18:34
 * @LastEditors: GW
 * @LastEditTime: 2022-05-14 16:18:01
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="call-system-wrapper">
            <!-- 页签  -->
            <a-tabs  v-model="activeKey" @change="onTabChange" class="tab-class">
                <a-tab-pane :key="1" tab="手动续费项">
                    <a-button type="primary" size="small" @click="checkBatchRenewal()" style="margin-bottom: 1rem;">批量续费</a-button>
                    <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 500}" :pagination="pagination" :row-selection="rowSelection"  @change="onTableChange" :loading="false">
                        <div slot="productionTypeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                            <a-radio-group v-model="postData.productionType" @change="onConditionChange" style="flex-direction: column;">
                                <a-radio :style="radioStyle" :value="null">
                                所有
                                </a-radio>
                                <a-radio :style="radioStyle" value="baseProduction">
                                基础产品
                                </a-radio>
                                <a-radio :style="radioStyle" value="callSetting">
                                外呼套餐
                                </a-radio>
                                <a-radio :style="radioStyle" value="callAgent">
                                外呼坐席
                                </a-radio>
                            </a-radio-group>
                        </div>
                        <!-- 操作 -->
                        <div slot="operation" slot-scope="text, record" >
                            <sapn class="opration-span" @click="renewal(record)">续费</sapn>
                            <sapn class="opration-span ml-2" @click="changeRenewalType(record.id,2)">设置为自动续费</sapn>
                        </div>
                    </a-table>
                </a-tab-pane>
                <a-tab-pane :key="2" tab="自动续费项">
                    <a-button type="primary" size="small" @click="checkBatchRenewal2()" style="margin-bottom: 1rem;">批量续费</a-button>
                    <a-table :columns="columns2" :data-source="data2" bordered :scroll="{ x: 1000, y: 500}" :pagination="pagination2" :row-selection="rowSelection2"  @change="onTableChange2" :loading="false">
                        <div slot="productionTypeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                            <a-radio-group v-model="postData2.productionType" @change="onConditionChange2" style="flex-direction: column;">
                                <a-radio :style="radioStyle" :value="null">
                                所有
                                </a-radio>
                                <a-radio :style="radioStyle" value="baseProduction">
                                基础产品
                                </a-radio>
                                <a-radio :style="radioStyle" value="callSetting">
                                外呼套餐
                                </a-radio>
                                <a-radio :style="radioStyle" value="callAgent">
                                外呼坐席
                                </a-radio>
                            </a-radio-group>
                        </div>
                        <!-- 操作 -->
                        <div slot="operation" slot-scope="text, record" >
                            <sapn class="opration-span" @click="renewal(record)">续费</sapn>
                            <sapn v-if="record.productionType != 'callSetting'" class="opration-span ml-2" @click="changeRenewalType(record.id,1)">设置为手动续费</sapn>
                        </div>
                    </a-table>
                </a-tab-pane>
            </a-tabs>
            <!-- 续费 弹窗  -->
            <batch-renewal-modal ref="batchRenewalModal" modalTitle="续费" @callBack="batchRenewal"></batch-renewal-modal>
        </div>
    </div>
</template>

<script>
import {  pageList , batchRenewalByCompany , changeRenewalType } from "@/api/expenses/property";

import { mapState } from 'vuex';
import BatchRenewalModal from "@/views/call/modal/BatchRenewalModal";
export default {
    components:{
        BatchRenewalModal
    },
    data () {
         const columns = [
             {
                align: "left",
                title: "资源ID/资源名称",
                dataIndex: "propertyUuid",
                width: 120,
                customRender: (text, row, index) => {
                    let showHtml =  <div style="padding: 10px;">
                                        <p style="font-size: 12px;color: #0D88FF;margin-bottom: 0px;">{row.propertyUuid}</p>
                                        <p style="font-size: 12px;margin-bottom: 0px;">{row.propertyName}</p>
                                    </div>;
                    return showHtml;
                },
            },
            {
                align: "left",
                title: "产品类型",
                dataIndex: "productionType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case "baseProduction":showText = "基础产品";break;
                        case "callSetting":showText = "外呼套餐";break;
                        case "callAgent":showText = "外呼坐席";break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'productionTypeFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
             {
                align: "left",
                title: "产品规格",
                dataIndex: "productionSpecifications",
                width: 200,
                customRender: (text, row, index) => {
                   let { productionType ,productionSpecifications} = row;
                    let showHtml = null;
                    if(!productionSpecifications)return showHtml;
                    let jsonData = JSON.parse(productionSpecifications);
                    switch(productionType){
                        case "baseProduction":
                            break;
                        case "callSetting":
                            showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                            <p>套餐名称：{jsonData.name}</p>
                                            <p>月低费：{jsonData.baseCharges} 元</p>
                                            <p>固定分钟数：{jsonData.baseMinutes} 分钟</p>
                                            <p>超出分钟数费率：{jsonData.price} 元/分钟</p>
                                        </div>;    
                            break;
                        case "callAgent":
                            showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                            <p>坐席单价：{jsonData.price} 元/年</p>
                                            <p>坐席个数：{jsonData.number} 个</p>
                                        </div>;
                            break;
                    }
                    return showHtml;
                },
               
            },
            {
                align: "center",
                title: "到期时间",
                dataIndex: "endTime",
                width: 80,
            },
            {
                align: "center",
                title: "最小续费周期",
                dataIndex: "minimumRenewalPeriod",
                width: 100,
                customRender: (text, row, index) => {
                    let showHtml = <div style="font-size: 12px;color: #F59A23;font-weight: 700;">{text}{row.renewalUnit}</div>;
                    return showHtml;
                },
            },
            {
                align: "center",
                title: "单价",
                dataIndex: "minimumRenewalPeriodPrice",
                width: 100,
                 customRender: (text, row, index) => {
                    let showHtml = <div style="font-size: 12px;color: #F59A23;font-weight: 700;">{text} 元/{row.renewalUnit}</div>;
                    return showHtml;
                },
            },
            {
                align: "center",
                title: "状态",
                dataIndex: "status",
                width: 100,
                customRender: (text, row, index) => {
                    //状态 1:已生效 2.已失效 400.已废弃
                    let resultTex = null;
                    switch(text){
                        case 1:resultTex = <sapn style="color: green">已生效</sapn>;break;
                        case 2:resultTex = <sapn style="color: red">已失效</sapn>;break;
                        case 400:resultTex = <sapn style="color: red">已废弃</sapn>;break;
                    }
                    return resultTex;
                },
            },
            {
                align: "center",
                title: "操作",
                dataIndex: "operation",
                width: 100,
                scopedSlots: { customRender: 'operation' },
            },
        ];
         const columns2 = [
             {
                align: "left",
                title: "资源ID/资源名称",
                dataIndex: "propertyUuid",
                width: 120,
                customRender: (text, row, index) => {
                    let showHtml =  <div style="padding: 10px;">
                                        <p style="font-size: 12px;color: #0D88FF;margin-bottom: 0px;">{row.propertyUuid}</p>
                                        <p style="font-size: 12px;margin-bottom: 0px;">{row.propertyName}</p>
                                    </div>;
                    return showHtml;
                },
            },
            {
                align: "left",
                title: "产品类型",
                dataIndex: "productionType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case "baseProduction":showText = "基础产品";break;
                        case "callSetting":showText = "外呼套餐";break;
                        case "callAgent":showText = "外呼坐席";break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'productionTypeFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
             {
                align: "left",
                title: "产品规格",
                dataIndex: "productionSpecifications",
                width: 200,
                customRender: (text, row, index) => {
                   let { productionType ,productionSpecifications} = row;
                    let showHtml = null;
                    if(!productionSpecifications)return showHtml;
                    let jsonData = JSON.parse(productionSpecifications);
                    switch(productionType){
                        case "baseProduction":
                            break;
                        case "callSetting":
                            showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                            <p>套餐名称：{jsonData.name}</p>
                                            <p>月低费：{jsonData.baseCharges} 元</p>
                                            <p>固定分钟数：{jsonData.baseMinutes} 分钟</p>
                                            <p>超出分钟数费率：{jsonData.price} 元/分钟</p>
                                        </div>;    
                            break;
                        case "callAgent":
                            showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                            <p>坐席单价：{jsonData.price} 元/年</p>
                                            <p>坐席个数：{jsonData.number} 个</p>
                                        </div>;
                            break;
                    }
                    return showHtml;
                },
               
            },
            {
                align: "center",
                title: "自动续费时间",
                dataIndex: "endTime",
                width: 80,
            },
             {
                align: "center",
                title: "自动续费周期",
                dataIndex: "minimumRenewalPeriod",
                width: 100,
                customRender: (text, row, index) => {
                    let showHtml = <div style="font-size: 12px;color: #F59A23;font-weight: 700;">{text}{row.renewalUnit}</div>;
                    return showHtml;
                },
            },
            {
                align: "center",
                title: "单价",
                dataIndex: "minimumRenewalPeriodPrice",
                width: 100,
                 customRender: (text, row, index) => {
                    let showHtml = <div style="font-size: 12px;color: #F59A23;font-weight: 700;">{text} 元/{row.renewalUnit}</div>;
                    return showHtml;
                },
            },
            {
                align: "center",
                title: "状态",
                dataIndex: "status",
                width: 100,
                customRender: (text, row, index) => {
                    //状态 1:已生效 2.已失效 400.已废弃
                    let resultTex = null;
                    switch(text){
                        case 1:resultTex = <sapn style="color: green">已生效</sapn>;break;
                        case 2:resultTex = <sapn style="color: red">已失效</sapn>;break;
                        case 400:resultTex = <sapn style="color: red">已废弃</sapn>;break;
                    }
                    return resultTex;
                },
            },
            {
                align: "center",
                title: "操作",
                dataIndex: "operation",
                width: 100,
                scopedSlots: { customRender: 'operation' },
            },
        ];
        return {
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
            activeKey: 1,
            /** 手动续费项 */
            postData: {
                status:null,
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            selectedKeys: [], //工序table选中key
            selectedData: [],
            data: [],
            columns,
            /** 自动续费项 */
            postData2: {
                status:null,
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            pagination2: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination2.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            selectedKeys2: [], //工序table选中key
            selectedData2: [],
            data2: [],
            columns2,
           
        };
    },
    computed: {
        ...mapState({
            menusMap: state => state.user.menusMap,
            menus: state => state.user.menus,
        }),
        rowSelection() {
            return {
                columnWidth:30,
                selectedRowKeys:this.selectedKeys,
                onChange: this.userSelection,
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.status > 1, 
                    },
                }),
            };
        },
        rowSelection2() {
            return {
                columnWidth:30,
                selectedRowKeys:this.selectedKeys2,
                onChange: this.userSelection2,
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.status > 1, 
                    },
                }),
            };
        },
    },
    watch: {

    },
    activated(){
        let {activeKey} = this;
        switch(activeKey){
            case 1:this.pageList();break;
            case 2:this.pageList2();break;
        }
    },
    methods: {
        //切换TAB
        onTabChange(activeKey){
            this.activeKey = activeKey;
            switch(activeKey){
                case 1:this.pageList();break;
                case 2:this.pageList2();break;
            }
        },
        //续费
        renewal(record){
            let openData = {
                modalTitle:"续费",
                data:[record],
            }
            this.$refs.batchRenewalModal.onModalOpen(openData);
        },
         //校验选项
        checkBatchRenewal(){
            let _this = this;
            if (this.selectedKeys.length < 1) {
                this.$message.warning('请选择记录');
                return;
            }
            let openData = {
                modalTitle:"续费",
                data:this.selectedData,
            }
            this.$refs.batchRenewalModal.onModalOpen(openData);
        },
        
          //校验选项
        checkBatchRenewal2(){
            let _this = this;
            if (this.selectedKeys2.length < 1) {
                this.$message.warning('请选择记录');
                return;
            }
              let openData = {
                modalTitle:"续费",
                data:this.selectedData2,
            }
            this.$refs.batchRenewalModal.onModalOpen(openData);
        },
        //批量续费
        batchRenewal(postData){
            let { activeKey } = this;
            let _this = this;
            this.$confirm({
                title: '确认',
                content: <span>您确定提交订单并支付？</span>,
                onOk () {
                    batchRenewalByCompany(postData).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("提交成功");
                            if(activeKey == 1){
                                _this.reloadData();
                            }else{
                                _this.reloadData2();
                            }
                            //刷新 
                            _this.$refs.batchRenewalModal.onModalClose();
                        }
                    });
                },
                onCancel () { },
            });
        },
        //更改 续费方式
        changeRenewalType(id,renewalType){
            let { activeKey } = this;
            let message = <span>您确定更改为<span style="color:red;">自动续费</span>方式?资源到期后将按续费周期自动续费，请您确保资源到期时账户余额充足!</span>;
            if(renewalType == 1){
                message = <span>您确定更改为<span style="color:red;">手动续费</span>方式?</span>;
            }
            let _this = this;
            this.$confirm({
                title: '提示',
                content: message,
                onOk () {
                    changeRenewalType({id,renewalType}).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("更改成功");
                            if(activeKey == 1){
                                _this.reloadData();
                            }else{
                                _this.reloadData2();
                            }
                         
                        }
                    });
                },
                onCancel () { },
            });
        },
       /***  手动续费项-列表   ***/
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
         userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        reloadData(){
            this.selectedKeys = [];
            this.selectedData = [];
            this.pageList();
        },
        //获取列表
        pageList () {
            const { postData ,activeKey} = this;
            postData.renewalType = activeKey;
            pageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    this.data.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
       
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
        /***  手动续费项-结束   ***/
        /***  自动动续费项-开始  ***/
        //点击分页
        onTableChange2 (pagination, filters, sorter) {
            Object.assign(this.postData2, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination2, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList2();
        },
        //改变 分页大小
        changePageSize2 (e) {
            const value = e.target.value;
            Object.assign(this.postData2, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination2, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList2();
        },
         userSelection2 (keys, rows) {
            this.selectedKeys2 = [];
            this.selectedKeys2 = keys;
            this.selectedData2 = rows;
        },
        reloadData2(){
            this.selectedKeys2 = [];
            this.selectedData2 = [];
            this.pageList2();
        },
        //获取列表
        pageList2 () {
            const { postData2,activeKey } = this;
            postData2.renewalType = activeKey;
            pageList(postData2).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data2 = records;
                    this.data2.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination2, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //条件改变
        onConditionChange2(){
            Object.assign(this.postData2.page,{current:1});
            this.pageList2();
        },
        /***  自动动续费项-结束  ***/

    },
};

</script>
<style lang="less" scoped>
    /deep/.ant-table-tbody {
            cursor: auto !important;
        }

   .tab-class{
       margin: 0 20px;
   }
    .opration-span{
        font-size: 12px;
        color: #0D88FF;
        margin-bottom: 0px;
        cursor:pointer;
    }

</style>

